<template>
  <UserCardList :user-list="userList"/>
  <van-empty v-if="!userList || userList.length<1" description="搜索结果为空"/>
</template>

<script setup lang="ts">

import {useRoute} from "vue-router";
import {onMounted,ref} from 'vue'
import myAxios from "../plugins/myAxios.js";
import qs from "qs";
import UserCardList from "../components/UserCardList.vue";

const route = useRoute();
//搜索携带参数
const {tags}=route.query


const userList=ref([])

//dom元素加载完成之后 显示
onMounted(async ()=>{
  //向后端发起请求
 const userListData=await myAxios.get('/user/search/tags', {
    params: {
      tagList: tags
    },
    paramsSerializer: function (params) {
      return qs.stringify(params, { arrayFormat: "repeat" });
    }

  })
     .then(function (response) {
        console.log('/user/search/tags succeed',response);
       //data可能为空 加一个可选择操作符号？
        return response?.data
      })
      .catch(function (error) {
        console.log('/user/search/tags failed',error);
      });

  if (userListData){
    userList.value=userListData
  }
})
</script>

<style scoped>

</style>